<template>
  <div class='choose' @click='showModel'>
    <img style='max-width:250px;max-height:150px;' :src='value||defaultUrl' alt=''>
    <div style='text-align: center;color: #999999;font-size: 12px;'>
      <slot>从素材库中选择</slot>
    </div>
    <material-list-model ref='materialListModel' @checkedUrl='checkedUrl'></material-list-model>
  </div>
</template>

<script>
//图片选择，从素材库中
import MaterialListModel from './material/MaterialListModel'

export default {
  name: 'ImageChoose',
  components: { MaterialListModel },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String
    }
  },
  data() {
    return {
      defaultUrl: require('@assets/editDefault.png')
    }
  },
  methods: {
    showModel() {
      console.log('showModel')
      this.$refs.materialListModel.show()
    },
    checkedUrl(url) {
      this.$emit('change', url)
    }
  }

}
</script>

<style scoped>
.choose {
  cursor: pointer;
}

</style>